import React from 'react';
import { Icon } from 'antd';
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts';

class GridContent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  getBarChart = () => {
    const data = [
      {
        name: 'Page A',
        uv: 4000,
        pv: 2400,
        amt: 2400,
      },
      {
        name: 'Page B',
        uv: 3000,
        pv: 1398,
        amt: 2210,
      },
      {
        name: 'Page C',
        uv: 2000,
        pv: 9800,
        amt: 2290,
      },
      {
        name: 'Page D',
        uv: 2780,
        pv: 3908,
        amt: 2000,
      },
      {
        name: 'Page E',
        uv: 1890,
        pv: 4800,
        amt: 2181,
      },
      {
        name: 'Page F',
        uv: 2390,
        pv: 3800,
        amt: 2500,
      },
      {
        name: 'Page G',
        uv: 3490,
        pv: 4300,
        amt: 2100,
      },
    ];
    return (
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={data}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Bar dataKey="pv" fill="#8884d8" />
          <Bar dataKey="uv" fill="#82ca9d" />
        </BarChart>
      </ResponsiveContainer>
    );
  };

  generateGraph = content => {
    switch (content.graphType) {
      case 'BarChart':
        return this.getBarChart(content);
      default:
        return null;
    }
  };

  // 按照props传来的内容来生成
  generateContent = content => {
    switch (content.type) {
      case 'text':
        return (
          <div>
            这是文本格式
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
          </div>
        );
      case 'graph':
        return this.generateGraph(content);
      default:
        return <div>这是其他情况</div>;
    }
  };

  render() {
    const { onRemoveItem, onChangeStyle, id, style, content } = this.props;
    const { basicStyle, menuStyle } = style;
    // 注意： ----这里下面最外面的div需要给设置绝对布局，并且内容的样式需要设置height：100%（见143行）----，这样子就可以保证在放大缩小的时候完全贴合变化
    // 可能还有别的方法吧，这是我参考metabase的 可以登录http://10.111.51.195:3000，有些样式可以抄的
    // 这里图标是使用rechart http://recharts.org/，也可以换别的，但是都要要找一个配合外面div同时缩放的配置
    return (
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          bottom: 0,
          right: 0,
          overflow: 'hidden',
        }}
      >
        <div className="header" style={{ marginTop: '5px' }}>
          <div>
            <span style={basicStyle}>{content.title}</span>
          </div>
          <div style={menuStyle}>
            <span onClick={() => onChangeStyle(id)}>
              <Icon type="setting" />
            </span>
            <span className="remove" onClick={() => onRemoveItem(id)}>
              <Icon type="close" />
            </span>
          </div>
        </div>
        <div style={{ border: '1px solid', height: '100%' }}>{this.generateContent(content)}</div>
      </div>
    );
  }
}

export default GridContent;
